<template>
	<div class="body-register">
		<Header isHome="true" />
		<main>
			<div class="register-main">
				<div class="register-header">用户注册</div>

				<el-form :model="registerForm" :rules="registerRules" ref="registerFormRef">
					<el-form-item prop="email">
						<el-input v-model="registerForm.email" placeholder="请输入邮箱">
							<template #prefix>
								<el-icon><Message /></el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="userName">
						<el-input v-model="registerForm.userName" placeholder="请输入用户名">
							<template #prefix>
								<el-icon><User /></el-icon>
							</template>
						</el-input>
					</el-form-item>

					<el-form-item prop="phone">
						<el-input v-model="registerForm.phone" placeholder="请输入手机号">
							<template #prefix>
								<el-icon><Phone /></el-icon>
							</template>
						</el-input>
					</el-form-item>

					<!-- <el-form-item prop="code">
						<div class="code-input">
							<el-input v-model="registerForm.code" placeholder="手机验证码">
								<template #prefix>
									<el-icon><Key /></el-icon>
								</template>
							</el-input>
							<el-button
								type="primary"
								:disabled="codeDisabled"
								@click="getCode"
								class="get-code-btn"
							>
								{{ codeButtonText }}
							</el-button>
						</div>
					</el-form-item> -->

					<el-form-item prop="password">
						<el-input
							v-model="registerForm.password"
							placeholder="设置密码"
							type="password"
							show-password
						>
							<template #prefix>
								<el-icon><Lock /></el-icon>
							</template>
						</el-input>
					</el-form-item>

					<el-form-item prop="confirmPassword">
						<el-input
							v-model="registerForm.confirmPassword"
							placeholder="确认密码"
							type="password"
							show-password
						>
							<template #prefix>
								<el-icon><Lock /></el-icon>
							</template>
						</el-input>
					</el-form-item>

					<el-button
						type="primary"
						@click="handleRegister"
						class="register-btn"
						:loading="registerLoading"
					>
						注册
					</el-button>
				</el-form>

				<div class="register-footer">
					<el-link type="primary" @click="goToLogin">使用已有账户登录</el-link>
				</div>
			</div>
		</main>
		<Footer />
	</div>
</template>

<script setup>
	import Header from '@/components/Header/index.vue'
	import Footer from '@/components/Footer/index.vue'
	import { ref, reactive } from 'vue'
	import { useRouter } from 'vue-router'
	import { ElMessage } from 'element-plus'
	import { register, checkEmail } from '@/api/user'

	const router = useRouter()

	// 注册表单
	const registerForm = reactive({
		userName: '',
		email: '',
		phone: '',
		// code: '',
		password: '',
		confirmPassword: ''
	})

	// 验证码按钮状态
	// const codeDisabled = ref(false)
	// const codeButtonText = ref('获取验证码')
	// const registerLoading = ref(false)
	// let countdown = 60

	// 表单验证规则
	const validateEmail = async (rule, value, callback) => {
		const data = (await checkEmail({ email: value })).data
		if (data.code === 409) {
			callback(new Error(data.msg))
		} else {
			callback()
		}
	}

	const validatePassword = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请再次输入密码'))
		} else if (value !== registerForm.password) {
			callback(new Error('两次输入密码不一致!'))
		} else {
			callback()
		}
	}

	const registerRules = {
		email: [
			{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
			{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
			{ validator: validateEmail, trigger: ['blur'] }
		],
		userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
		phone: [
			{ required: true, message: '请输入手机号', trigger: 'blur' },
			{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
		],
		// code: [
		// 	{ required: true, message: '请输入验证码', trigger: 'blur' },
		// 	{ pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: ['blur', 'change'] }
		// ],
		password: [
			{ required: true, message: '请输入密码', trigger: 'blur' },
			{ min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur' }
		],
		confirmPassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
	}

	// 获取验证码
	// const getCode = () => {
	// 	if (!registerForm.phone) {
	// 		ElMessage.warning('请输入手机号')
	// 		return
	// 	}

	// 	codeDisabled.value = true
	// 	const timer = setInterval(() => {
	// 		countdown--
	// 		codeButtonText.value = `${countdown}秒后重新获取`
	// 		if (countdown <= 0) {
	// 			clearInterval(timer)
	// 			codeDisabled.value = false
	// 			codeButtonText.value = '获取验证码'
	// 			countdown = 60
	// 		}
	// 	}, 1000)

	// 	// 这里应该调用API发送验证码
	// 	ElMessage.success('验证码已发送')
	// }

	// 注册提交

	const handleRegister = async () => {
		const data = (await register(registerForm)).data
		if (data.code === 200) {
			ElMessage.success('注册成功')
			router.push('/login')
		}else{
      ElMessage.error(data.msg)
    }
	}

	// 跳转到登录页
	const goToLogin = () => {
		router.push('/login')
	}
</script>

<style lang="scss" scoped>
	.body-register {
		width: 100vw;
		height: 100vh;
	}

	main {
		height: calc(100% - 175px);
		background: url('@/assets/images/bg.png') fixed no-repeat;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.register-main {
		width: 450px;
		padding: 30px;
		background-color: #fff;
		border-radius: 8px;
	}

	.register-header {
		text-align: center;
		font-size: 24px;
		font-weight: bolder;
		color: #409eff;
		margin-bottom: 20px;
	}

	:deep(.el-input__inner) {
		font-size: 16px;
		height: 38px;
		line-height: 38px;
	}

	.code-input {
		width: 100%;
		display: flex;

		.el-input {
			flex: 1;
			margin-right: 10px;
		}

		.get-code-btn {
			width: 120px;
			height: 38px;
			font-size: 16px;
		}
	}

	.register-btn {
		width: 100%;
		height: 50px;
		font-size: 18px;
		margin-top: 5px;
	}

	.register-footer {
		display: flex;
		justify-content: center;
		margin-top: 20px;

		.el-link {
			font-size: 14px;
		}
	}
</style>
